<h1 mat-dialog-title>{{data==null?'Add User':'Edit'}}</h1>
<form style="width: 180px;margin: 0 auto" [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="id" style="display: none">
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Name</mat-label>
      <input formControlName="name" matInput placeholder="name"
             [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.name.errors && f.name.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Password</mat-label>
      <input formControlName="password" matInput placeholder="password"
             [ngClass]="{ 'is-invalid': submitted && f.password.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.password.errors && f.password.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Gender</mat-label>
      <input formControlName="gender" matInput placeholder="name"
             [ngClass]="{ 'is-invalid': submitted && f.gender.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.gender.errors && f.gender.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Address</mat-label>
      <input formControlName="address" matInput placeholder="address"
             [ngClass]="{ 'is-invalid': submitted && f.address.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.address.errors && f.address.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Phone</mat-label>
      <input formControlName="phone" matInput placeholder="phone"
             [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.phone.errors && f.phone.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Email</mat-label>
      <input formControlName="email" matInput placeholder="email"
             [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.email.errors && f.email.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field appearance="legacy">
      <mat-label>Role</mat-label>
      <input formControlName="role" matInput placeholder="phone"
             [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
      <!--      <mat-icon matSuffix></mat-icon>-->
      <mat-hint *ngIf="submitted && f.role.errors && f.role.errors.required">Hint</mat-hint>
    </mat-form-field>
  </p>
  <div mat-dialog-actions>
    <button type="submit" mat-button>Add</button>
  </div>
</form>
